<template>
	<view class="textInfo">
		<text class="txt">{{orderTitle}} {{dayAndNight}} - 行程计划</text>
		<view class="persons-Time">
			<text>{{ getPersonsInfo }}</text>
			<text>   ·   </text>
			<text>{{formattedStartDate}} - {{formattedEndDate}}</text>
		</view>
		<view class="footer-prices">
			<view class="prices">
				<text>￥????</text>
				<view class="icon" @click="openPopup">
					<text>起</text>
					<image src="@/static/eIcones/常见问题.png.png" mode=""></image>
				</view>
			</view>
			<text>更行于{{ currentDate }}</text>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" animation="true">
		<view class="popup-content">
			<text class="title">预估价格</text>
			<text class="content">预估价格不含抵达前费用，具体价格以顾问确认后为准。</text>
			<view class="confirm" @click="closePopup">我知道了</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, defineProps, onMounted, watchEffect, computed } from 'vue';
	const popup = ref(null);
	const emit = defineEmits();
	const currentDate = ref('');
	const formattedStartDate = ref('');
	const formattedEndDate = ref('');
	const date = ref();
	const props = defineProps({
		TripInfoData: {
			type: Object,
			default: () => {},
		},
	});

	// 格式化日期的函数
	const formatDate = (dateString) => {
		const date = new Date(dateString);
		if (isNaN(date)) return ''; // 如果日期无效，返回空字符串
		const month = date.getMonth() + 1; 
		const day = date.getDate();
		return `${month}月${day < 10 ? '0' + day : day}日`;
	};

	// 获取当前日期
	const getCurrentDate = () => {
		const date = new Date();
		const month = date.getMonth() + 1; // 月份是从0开始的，需要加1
		const day = date.getDate();
		return `${month}月${day < 10 ? '0' + day : day}日`;
	};

	// 在组件加载时执行
	onMounted(() => {
		// 获取当前日期
		currentDate.value = getCurrentDate();
	});
	
	// 使用 watchEffect 监听并处理日期逻辑
	watchEffect(() => {

		// 获取接口传递的开始日期 (arrival_time)
		const arrivalDate = props.TripInfoData?.arrival_time;
		if (arrivalDate) {
			date.value = arrivalDate;
			formattedStartDate.value = formatDate(arrivalDate);
		}

		// 获取arrangement_info的天数，并推算结束日期
		const daysCount = props.TripInfoData?.arrangement_info.length || 0;
		if (date.value && !isNaN(new Date(date.value))) {
			const endDate = new Date(date.value);
			endDate.setDate(endDate.getDate() + daysCount - 1); // 根据trip_dayorhotel的长度计算结束日期
			formattedEndDate.value = formatDate(endDate);
		} else {
			formattedEndDate.value = '';
		}
	});
	//计算标题
	const orderTitle = computed(()=>{
		return props.TripInfoData?.order_title
	})
	// 计算人员信息
	const getPersonsInfo = computed(() => {
		const tripNum = props.TripInfoData?.person_info || {};
		let personsInfo = [];
		if (tripNum.adult > 0) {
			personsInfo.push(`${tripNum.adult}成人`);
		}
		if (tripNum.bin_kid > 0) {
			personsInfo.push(`${tripNum.bin_kid}大童`);
		}
		if (tripNum.foreigner > 0) {
			personsInfo.push(`${tripNum.foreigner}外籍人`);
		}
		if (tripNum.hmt_person > 0) {
			personsInfo.push(`${tripNum.hmt_person}港澳台人`);
		}
		if (tripNum.middle_kid > 0) {
			personsInfo.push(`${tripNum.middle_kid}中童`);
		}
		if (tripNum.old_man > 0) {
			personsInfo.push(`${tripNum.old_man}老人`);
		}
		if (tripNum.small_kid > 0) {
			personsInfo.push(`${tripNum.small_kid}幼童`);
		}

		return personsInfo.join('  ·  ');
	});
	//结算几天几夜
	const  dayAndNight = computed(()=>{
		const daysCount = props.TripInfoData?.arrangement_info.length || 0;
		return `${daysCount}天${daysCount - 1}晚`
	})
	// 打开popup
	const openPopup = () => {
		emit('openPopup');
		popup.value.open('center');
	};

	// 关闭popup
	const closePopup = () => {
		emit('closePopup');
		popup.value.close();
	};
</script>


<style lang="scss" scoped>
	.textInfo{
		width: 100%;
		padding:30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column; 
		.txt{ 
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.persons-Time{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			text{
				font-size: 24rpx;
			}
		}
		.footer-prices{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.prices{
				display: flex;
				align-items: baseline;
				gap: 4rpx;
				text{
					font-size: 32rpx;
					color: #ac2a26;
					font-weight: 600;
				}
				.icon{
					display: flex;
					align-items: center;
					gap: 4rpx;
					text{
						font-size: 20rpx;
						color: #999999;
					}
					image{
						width: 23rpx;
						height: 23rpx;
					}
				}
			}
			text{
				font-size: 26rpx;
				color: #999999;
			}
		}
	}
	.popup-content{
		width: 80vw;
		border-radius: 30rpx;
		background-color: #fff;
		animation: slideUp 0.3s ease-out;
		text{
			display: block;
			text-align: center;
			padding: 50rpx 30rpx 0 30rpx;
			box-sizing: border-box;
		}
		.title{
			width: 100%;
			margin-bottom: 20rpx;
		}
		.content{
			width: 100%;
			font-size: 28rpx;
			color: #999999;
			padding: 0rpx 30rpx 40rpx 30rpx;
		}
		.confirm{
			width: 100%;
			height: 120rpx;
			border-top: 2rpx solid #f5f6f7;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}	
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}
</style>